<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>图书</title>
    <link rel="stylesheet" type="text/css" href="../css/basic.css"/>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/audioPlayer.js"></script>
    <script type="text/javascript" src="../js/modernizr.2.5.3.min.js"></script>
    <script type="text/javascript" src="../js/main.js"></script>
    
</head>


<style type="text/css">
* { padding: 0; margin: 0; }
.am-share { font-size: 14px; border-radius: 0; bottom: 0; left: 0; position: fixed; text-align: center; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 300ms; transition: transform 300ms ; width: 100%; z-index: 1110; }
.am-modal-active { transform: translateY(0px);  -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) }
.am-modal-out { z-index: 1109; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%) }

.am-share-title { background-color: #f8f8f8; border-bottom: 1px solid #fff; border-top-left-radius: 2px; border-top-right-radius: 2px; color: #555; font-weight: 400; margin: 0 10px; padding: 10px 0 0; text-align: center; }
.am-share-title::after { border-bottom: 1px solid #dfdfdf; content: ""; display: block; height: 0; margin-top: 10px; width: 100%; }

.am-share-footer { margin: 10px; }
.am-share-footer .share_btn { color: #555;  display: block; width: 100%; background-color: #e6e6e6; border: 1px solid #e6e6e6; border-radius: 0; cursor: pointer;  font-size: 16px; font-weight: 400; line-height: 1.2; padding: 0.625em 0; text-align: center; transition: background-color 300ms ease-out 0s, border-color 300ms ease-out 0s; vertical-align: middle; white-space: nowrap;font-family:"微软雅黑";  }

.am-share-sns { background-color: #f8f8f8; border-radius: 0 0 2px 2px; margin: 0 10px; padding-top: 15px; height:auto; zoom:1; overflow:auto; }

.am-share-sns li { margin-bottom: 15px; display: block; float: left; height: auto;  width: 25%; }

.am-share-sns a { color: #555; display: block; text-decoration:none; }
.am-share-sns span { display: block; }

.am-share-sns li i { background-position: center 50%; background-repeat: no-repeat; background-size: 36px 36px; color: #fff; display: inline-block; font-size: 18px; height: 36px; line-height: 36px; margin-bottom: 5px; width: 36px; }
.am-share-sns .share-icon-weibo { }

.sharebg { background-color: rgba(0, 0, 0, 0.6); bottom: 0; height: 100%; left: 0; opacity: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 1100; display:none; }
.sharebg-active { opacity: 1; display:block; }

#li_menu4{
	background-image: url('../img/icon_menu1_on.png');
}

#li_menu5{
	background-image: url('../img/icon_menu2_off.png');
}

#li_menu6{
	background-image: url('../img/icon_menu3_off.png');
}

#li_menu7{
	background-image: url('../img/icon_menu4_off.png');
}
#li_menu8{
 background-image: url('../img/icon_menu5_off.png');   
}

.bottom_menu_div{
	z-index: 200;
	width:100%;
    height:10%;
	position: fixed;
    background-color: yellow;
	top:90%;
	left: 0px;
    right:0px;
}
#body{
    width: 100%;
    height:100%;
    position: absolute;
}
.bottom_menu_img{

}
#bottom_menu_img1{
	margin-left:7%;
    width: 10%;
    height:10%;
}

#bottom_menu_img2{
	margin-left: 25%;
    width: 14%;
    height:14%;
}

#bottom_menu_img3{
    margin-left: 25%;
    width: 11%;
    height:11%;
}
#page_container{
    height:90%;
    width: 100%;
}
#div_container{
    width:100%;
    z-index:999;
}

#div_tips{
    margin-right: 20%;
    margin-left: 20%;
    margin-top: 5%;
    padding: 5px;
    left:0;
    right:0;
    background-color: #0099FF;
    border-radius: 5px;
    text-align: center;
    color:white;
    position: absolute;
}
#div_right{
    margin-left: 30%;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    width: 70%;
    height: 100%;
    background-color: yellow;
    position: fixed;

}
#div_words_dialog{
    background-color: white;
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 15px;
    width:100%;
    height:45%;
    position: absolute;
    overflow:scroll;
}

#img_close{
    width:12%;
    margin-left:85%;
}

#div_words_bg{
    background-color:rgba(0, 0, 0, .50);
    color: #FFFFFF;  
    width:100%;
    height:100%;
    position: absolute;
}

</style>


<body>


    <div id = "body">

        
        <div id="div_tips" style="z-index: 999;" hidden></div>


        <div id="div_right" style="z-index: 2999;" hidden></div>


        <div id="div_words_dialog" style="z-index: 1999;" hidden>
            <img id="img_close" src="../img/img_close.png" onclick="closeDialog()">
            <p style="color:#0099FF;text-align: center;margin-top: -10%">长按文字选择想要查词的内容</p>
            <br/>
            <div id="div_words_dialog_content"></div>
        </div>
        <div id="div_words_bg"  style="z-index: 1998;" hidden>
        </div>

        <div style="position: relative;" id="page_container">
        
            <!-- <div class="shade" style="z-index: 1;">
                <div class="sk-fading-circle">
                    <div class="sk-circle1 sk-circle"></div>
                    <div class="sk-circle2 sk-circle"></div>
                    <div class="sk-circle3 sk-circle"></div>
                    <div class="sk-circle4 sk-circle"></div>
                    <div class="sk-circle5 sk-circle"></div>
                    <div class="sk-circle6 sk-circle"></div>
                    <div class="sk-circle7 sk-circle"></div>
                    <div class="sk-circle8 sk-circle"></div>
                    <div class="sk-circle9 sk-circle"></div>
                    <div class="sk-circle10 sk-circle"></div>
                    <div class="sk-circle11 sk-circle"></div>
                    <div class="sk-circle12 sk-circle"></div>
                </div>
                <div class="number"></div>
            </div> -->
            <div class="flipbook-viewport" style="display:none;z-index: 2">
                <!-- <div class="previousPage"></div> -->
                <!-- <div class="nextPage"></div> -->
                <!-- <div class="return"></div> -->
                <!-- <img class="btnImg" src="../img/btn.gif" style="display: none"/> -->

               
                <div class="container" style="width: 100%;height:100%;background-color: white">
                    <div class="flipbook" style="background-color: white">
                    </div>
                </div>
            </div>


            
            <div id="div_container" style="z-index: 3;"></div>

            <!-- 用于播放声音 -->
            <audio id="music_player">
                <source src="" >
            </audio>



            
            <div class="am-share" >
             
              <ul class="am-share-sns">

             <!--    <li><a href="#"> <i class="share-icon-weibo" id="li_menu1"></i> <span></span> </a> </li>
                <li><a href="#"> <i class="share-icon-weibo" id="li_menu2"></i> <span></span> </a> </li>
                <li><a href="#"> <i class="share-icon-weibo" id="li_menu3"></i> <span></span> </a> </li> -->


                <li><a href="#"> <i class="share-icon-weibo"   id="li_menu4" onclick="menu1()"></i> <span>单句</span> </a> </li>
                <li><a href="#"> <i class="share-icon-weibo"  id="li_menu5"  onclick="menu2()"></i> <span>本课</span> </a> </li>
                <li><a href="#"> <i class="share-icon-weibo"  id="li_menu6"  onclick="menu3()"></i> <span>复读</span> </a> </li>
                <li><a href="#"> <i class="share-icon-weibo"  id="li_menu7"  onclick="menu4()"></i> <span>连读</span> </a> </li>

                <li><a href="#"> <i class="share-icon-weibo"  id="li_menu8"  onclick="menu5()"></i> <span>查词</span> </a> </li>

              </ul>
            </div>

                <div class="bottom_menu_div">
                <p>
                    <img src="../img/icon_menu.png" class="bottom_menu_img" id="bottom_menu_img1" onclick="showmenu()">
                    <img src="../img/icon_play.png" class="bottom_menu_img" id="bottom_menu_img2" onclick="readstate()">

                    <img src="../img/img_translation_off.png" class="bottom_menu_img" id="bottom_menu_img3" onclick="translation_change()">
                </p>

            </div>

        </div>
    </div>
   





<script>
    //自定义仿iphone弹出层
    (function ($) {
        //ios confirm box
        jQuery.fn.confirm = function (title, option, okCall, cancelCall) {
            var defaults = {
                title: null, //what text
                cancelText: '取消', //the cancel btn text
                okText: '确定' //the ok btn text
            };

            if (undefined === option) {
                option = {};
            }
            if ('function' != typeof okCall) {
                okCall = $.noop;
            }
            if ('function' != typeof cancelCall) {
                cancelCall = $.noop;
            }

            var o = $.extend(defaults, option, {title: title, okCall: okCall, cancelCall: cancelCall});

            var $dom = $(this);

            var dom = $('<div class="g-plugin-confirm">');
            var dom1 = $('<div>').appendTo(dom);
            var dom_content = $('<div>').html(o.title).appendTo(dom1);
            var dom_btn = $('<div>').appendTo(dom1);
            var btn_cancel = $('<a href="#"></a>').html(o.cancelText).appendTo(dom_btn);
            var btn_ok = $('<a href="#"></a>').html(o.okText).appendTo(dom_btn);
            btn_cancel.on('click', function (e) {
                o.cancelCall();
                dom.remove();
                e.preventDefault();
            });
            btn_ok.on('click', function (e) {
                o.okCall();
                dom.remove();
                e.preventDefault();
            });

            dom.appendTo($('body'));
            return $dom;
        };
    })(jQuery);

    //上一页
    $(".previousPage").bind("touchend", function () {
        var pageCount = $(".flipbook").turn("pages");//总页数
        var currentPage = $(".flipbook").turn("page");//当前页
        if (currentPage >= 2) {
            $(".flipbook").turn('page', currentPage - 1);
        } else {
        }
    });

    // 下一页
    $(".nextPage").bind("touchend", function () {
        var pageCount = $(".flipbook").turn("pages");//总页数
        var currentPage = $(".flipbook").turn("page");//当前页
        if (currentPage <= pageCount) {
            $(".flipbook").turn('page', currentPage + 1);
        } else {
        }
    });
    //返回到目录页
    $(".return").bind("touchend", function () {
        $(document).confirm('您确定要返回首页吗?', {}, function () {
            $(".flipbook").turn('page', 1); //跳转页数
        }, function () {
        });
    });
</script>
</body>
</html>